
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 下拉框</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-下拉框FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="下拉框 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link current">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>下拉框</h1>
    
    <h2 id="创建下拉框"><a href="#创建下拉框" class="headerlink" title="创建下拉框"></a>创建下拉框</h2><p>可以通过两种方式创建下拉框组件。</p>
<ul>
<li>点击主菜单“资源”-&gt;“新建下拉框”，然后按照向导的提示一步步完成。</li>
</ul>
<p><img src="../../images/QQ20191211-094805.png" alt></p>
<ul>
<li>新建一个组件，然后在组件属性里选择扩展为“下拉框”。</li>
</ul>
<h2 id="设计属性"><a href="#设计属性" class="headerlink" title="设计属性"></a>设计属性</h2><p>在组件编辑状态下，下拉框组件的属性面板是：</p>
<p><img src="../../images/QQ20191211-094841.png" alt></p>
<ul>
<li><p><code>弹出组件</code> 下拉框在选项弹出时需要用到的组件。</p>
<p>这个组件最基本的设计就是一个背景+一个列表。背景对容器组件做好宽高关联。列表需要命名为“list”，并设置好“项目资源”，一般来说，列表的“溢出处理”设置为“垂直滚动”。列表不需要建立任何关联。</p>
<p><img src="../../images/QQ20191211-095015.png" alt></p>
<p>当下拉框需要弹出下拉列表时，会将弹出组件的宽度自动设置成下拉框的宽度，然后填充列表数据，并按照“可见项目数量”的要求调整列表高度，最后显示出来。</p>
</li>
</ul>
<h2 id="制作说明"><a href="#制作说明" class="headerlink" title="制作说明"></a>制作说明</h2><ul>
<li><code>button</code> 下拉框也需要一个按钮控制器，因为他和按钮的形态是一样的。可以按设计按钮的方式设计下拉框。当下拉框被点击下拉时，“button”控制器将停留在“down”页，下拉列表收回后，“button”控制器回到“up”页或“over”页。</li>
<li></li>
<li><p><code>title</code> 可以是普通文本，富文本，也可以是标签、按钮。</p>
</li>
<li><p><code>icon</code> 可以是装载器，也可以是标签、按钮。</p>
</li>
<li><h2 id="实例属性"><a href="#实例属性" class="headerlink" title="实例属性"></a>实例属性</h2></li>
</ul>
<p>在舞台上选中一个下拉框组件，右边的属性面板列表出现：</p>
<p><img src="../../images/QQ20191211-095124.png" alt></p>
<ul>
<li><p><code>标题</code> 设置的文本将赋值到标签组件内的“title”元件的文本属性。如果不存在“title”元件，则什么事都不会发生。</p>
</li>
<li><p><code>图标</code> 设置的URL将赋值到标签组件内的“icon”元件的图标属性。如果不存在“icon”元件，则什么事都不会发生。</p>
</li>
<li><p><code>可见项目数量</code> 下拉显示时最多显示的项目数量。例如，如果这里设置的值为10，而下拉框的数据有100条，那么下拉列表的视口会调整到只显示10条，其他需要滚动查看。</p>
</li>
<li><p><code>弹出方向</code> 下拉列表的弹出方向。如果为自动，先尝试向下弹出，如果显示超出屏幕，再尝试向上弹出。</p>
</li>
<li><p><code>选择控制</code> 可以绑定一个控制器。这样当下拉框选择发生改变时，控制器也同时跳转到相同索引的页面。反之亦然，如果控制器跳转到某个页面，那么下拉框也同时选定相同索引的项目。</p>
</li>
<li><p><code>编辑列表项目</code> 点击后弹出对话框，可以编辑下拉列表的项目：</p>
<p><img src="../../images/QQ20191211-095240.png" alt></p>
<ul>
<li><code>发布时清空</code> 发布时清空所有的items，也就是这里的设置内容仅作为编辑器内的预览用途。</li>
<li><code>文本</code> 设置这个列表项目的标题。</li>
<li><code>图标</code> 设置这个列表项目的图标。</li>
<li><code>值</code> 设置这个列表项目的value属性，用途可参考下面API的说明。</li>
</ul>
</li>
</ul>
<h2 id="GComboBox"><a href="#GComboBox" class="headerlink" title="GComboBox"></a>GComboBox</h2><p>我们可以在编辑器编辑下拉列表的项目，也可以用代码动态设置，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">GComboBox combo = gcom.GetChild(<span class="string">"n1"</span>).asComboBox;</span><br><span class="line"></span><br><span class="line"><span class="comment">//items是列表项目标题的数组。</span></span><br><span class="line">combo.items = <span class="keyword">new</span> <span class="keyword">string</span>[] &#123; <span class="string">"Item 1"</span>, <span class="string">"Item 2"</span>, ...&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//values是可选的，代表每个列表项目的value。</span></span><br><span class="line">combo.values = <span class="keyword">new</span> <span class="keyword">string</span>[] &#123; <span class="string">"value1"</span>, <span class="string">"value2"</span>, ...&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//获得当前选中项的索引</span></span><br><span class="line">Debug.Log(combo.selectedIndex);</span><br><span class="line"></span><br><span class="line"><span class="comment">//获得当前选中项的value。</span></span><br><span class="line">Debug.Log(combo.<span class="keyword">value</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//设置选中项，通过索引</span></span><br><span class="line">combo.selectedIndex = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//设置选中项，通过value</span></span><br><span class="line">combo.<span class="keyword">value</span> = <span class="string">"value1"</span>;</span><br></pre></td></tr></table></figure>
<p>下拉框选择改变时有通知事件：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//Unity/Cry/MonoGame</span></span><br><span class="line">combo.onChanged.Add(onChanged);</span><br><span class="line"></span><br><span class="line"><span class="comment">//AS3</span></span><br><span class="line">combo.addEventListener(StateChangeEvent.CHANGED, onChanged);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Egret</span></span><br><span class="line">combo.addEventListener(fairygui.StateChangeEvent.CHANGED, <span class="keyword">this</span>.onChanged, <span class="keyword">this</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Laya</span></span><br><span class="line">combo.<span class="keyword">on</span>(fairygui.Events.STATE_CHANGED, <span class="keyword">this</span>, <span class="keyword">this</span>.onChanged);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Cocos2dx</span></span><br><span class="line">combo-&gt;addEventListener(UIEventType::Changed, CC_CALLBACK_1(AClass::onChanged, this));</span><br><span class="line"></span><br><span class="line"><span class="comment">//CocosCreator</span></span><br><span class="line">combo.<span class="keyword">on</span>(fgui.Event.STATUS_CHANGED, <span class="keyword">this</span>.onChanged, <span class="keyword">this</span>);</span><br></pre></td></tr></table></figure>
<p>点击空白处后弹出框会自动关闭，如果要获得这个关闭的通知，可以监听移出舞台的事件，例如：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//Unity/Cry</span></span><br><span class="line">combo.dropdown.onRemoveFromStage.Add(onPopupClosed);</span><br><span class="line"></span><br><span class="line"><span class="comment">//AS3</span></span><br><span class="line">combo.dropdown.addEventListener(Event.REMOVED_FROM_STAGE, onPopupClosed);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Egret</span></span><br><span class="line">combo.dropdown.addEventListener(egret.Event.REMOVED_FROM_STAGE, <span class="keyword">this</span>.onPopupClosed, <span class="keyword">this</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Laya</span></span><br><span class="line">combo.dropdown.<span class="keyword">on</span>(laya.events.Event.UNDISPLAY, <span class="keyword">this</span>, <span class="keyword">this</span>.onPopupClosed);</span><br><span class="line"></span><br><span class="line"><span class="comment">//Cocos2dx</span></span><br><span class="line">combo-&gt;getDropdown()-&gt;addEventListener(UIEventType::Exit, CC_CALLBACK_1(AClass::onPopupClosed, this));</span><br><span class="line"></span><br><span class="line"><span class="comment">//CocosCreator</span></span><br><span class="line">combo.<span class="keyword">on</span>(fgui.Event.UNDISPLAY, <span class="keyword">this</span>.onPopupClosed, <span class="keyword">this</span>);</span><br></pre></td></tr></table></figure>
<p>如果要手工关闭弹出框：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">GRoot.inst.HidePopup();</span><br></pre></td></tr></table></figure>
    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/combobox.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
